<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="userInfo"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="用户" prop="systemUserUsername">
        <el-input v-model="userInfo.systemUserUsername" disabled/>
      </el-form-item>
      <el-form-item label="用户昵称" prop="systemUserNickName">
        <el-input v-model="userInfo.systemUserNickName" />
      </el-form-item>
      <el-form-item label="手机号码" prop="systemUserPhone">
        <el-input v-model="userInfo.systemUserPhone" />
      </el-form-item>
      <el-form-item label="邮箱" prop="systemUserEmail">
        <el-input v-model="userInfo.systemUserEmail" />
      </el-form-item>
      <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload class="avatar-uploader" 
              :file-list="fileList" list-type="picture-card"
              action="http://localhost:8080/file/upload" 
              :on-success="handleAvatarSuccess"
              :on-exceed="handleExceed" :limit="1">
              <el-icon class="avatar-uploader-icon">
                  <Plus />
              </el-icon>
          </el-upload>
      </el-form-item>
      <el-form-item class="mg_left_70">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="danger" @click="resetForm()">重置</el-button>
      </el-form-item> 

    </el-form>
  </template>
  <script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  const url = ref('http://localhost:8080/file/downLoad?fileName=')
  const ruleFormRef = ref()
  const fileList = ref([]);
  const userInfo=ref(JSON.parse(localStorage.getItem('userInfo')))

  
  onMounted(() => {
    fileList.value = [{
      url: url.value + userInfo.value.systemUserImg, // 假设头像文件名存储在 userInfo.systemUserImg 中
      name: userInfo.value.systemUserImg
    }]
})
const handleExceed = (files) => {
  ElMessage.warning('只能上传一张图片!');
};
// 上传成功的回调函数
const handleAvatarSuccess = (response, uploadFile, uploadFiles) => {
  // 更新文件列表显示
  fileList.value = [uploadFile]
  // 新增头像文件名更新到用户信息
  userInfo.value.systemUserImg = response.data
}

  const rules = reactive({
    systemUserNickName: [
    { required: true, message: '用户昵称不能为空', trigger: 'blur' },
    { min: 3, max: 5, message: '长度需在3到5个字符之间', trigger: 'blur' }, // 修正错误提示
  ],
  systemUserPhone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { 
      pattern: /^1[3-9]\d{9}$/, // 添加手机号正则验证
      message: '请输入有效的手机号码',
      trigger: 'blur'
    },
  ],
  systemUserEmail: [
    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
    { 
      type: 'email', // 使用内置邮箱格式验证
      message: '请输入有效的邮箱地址',
      trigger: 'blur'
    },
  ]
  })
  // 保存
  const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.put('/systemUser/edit', userInfo.value) // 使用.value访问响应式对象
        .then(res => {
          // 更新本地存储使用响应式对象的值
          localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
          ElMessage.success('保存成功')
          location.reload()
        })
    }
  })
}
// 重置
const resetForm = () => {
  fileList.value = [{
    url: url.value + userInfo.value.systemUserImg, // 假设头像文件名存储在 userInfo.systemUserImg 中
    name: userInfo.value.systemUserImg
  }]
  ruleFormRef.value.resetFields()
}
</script>
<style scoped>
.mg_left_70{margin-left: 70px; padding-bottom: 70px;}
.el-form{padding-top:20px;}
</style>